<template>
    <div id="rekation" style="width: 100%; height: 88%;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
    //main
    document.getElementById("rekation").style.width = "778px";
    //   document.getElementById("rekation").style.height = "300px";
    var chartDom = document.getElementById('rekation');
    var myChart = echarts.init(chartDom);

    // ECharts配置代码  
    const option = {
        title: {
          
        },
        tooltip: {},
        series: [
            {
                type: 'graph',
                layout: 'force',
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12,
                            color: 'black'
                        },
                    }
                },
                force: {
                repulsion: 1000,
                edgeLength: 70,
                layoutAnimation: false
            },
            lineStyle: {
                normal: {
                    opacity: 1,
                    width: 1,
                    curveness: 0
                }
            },



                data: [
                    { name: '节点 1', symbolSize: [120,50]},
                    { name: '节点 2', symbolSize: [120,50] },
                    { name: '节点 3', symbolSize: [120,50] },
                    { name: '节点 4', symbolSize: [120,50] },
                    { name: '节点 5', symbolSize: [120,50] },
                    { name: '节点 6', symbolSize: [120,50] },
                    { name: '节点 7', symbolSize: [120,50] },
                    { name: '节点 8', symbolSize: [120,50] },
                    { name: '节点 9', symbolSize: [120,50] },
                    { name: '节点 10', symbolSize: [120,50] },
                    { name: '节点 11', symbolSize: [120,50] },
                ],
                links: [
                    { source: '节点 1', target: '节点 1' },
                    { source: '节点 2', target: '节点 1' },
                    { source: '节点 3', target: '节点 1' },
                    { source: '节点 4', target: '节点 1' },
                    { source: '节点 5', target: '节点 1' },
                    { source: '节点 6', target: '节点 1' },
                    { source: '节点 7', target: '节点 1' },
                    { source: '节点 8', target: '节点 1' },
                    { source: '节点 9', target: '节点 1' },
                    { source: '节点 10', target: '节点 1' },
                    { source: '节点 11', target: '节点 1' },
                ]
            }
        ]
    };
    myChart.setOption(option);
})

</script>

<style lang="scss" scoped></style>